<script setup lang="ts">
import { useUserStore } from '@/hooks/store';
import { isMobile } from '@/hooks/use-utils/helper';
import Base from '@/modules/profile/Base.vue';
import ProfileDynamic from '@/modules/profile/ProfileDynamic.vue';
import PwdUpdate from '@/modules/profile/PwdUpdate.vue';
import TabsBase from '@/modules/profile/tabsBase.vue';

const userStore = useUserStore();
const _userInfo = computed(() => userStore.userInfo);
provide('USER-INFO', _userInfo);
const handleRefresh = () => {
  userStore.getUserInfo();
};
</script>

<template>
  <div class="container-fluid cz-h-[100vh] cz-flex cz-justify-center cz-p-4 cz-profile">
    <div class="cz-min-h-72 cz-p-2 max-md:cz-w-full cz-w-1/2">
      <Base />
      <div class="cz-py-4 cz-flex">
        <div class="cz-flex-1 card-bg cz-rounded-[8px] cz-min-h-96">
          <el-tabs
            :tab-position="isMobile?'top':'left'"
            style="height: 100%;"
          >
            <el-tab-pane label="基础信息">
              <template #label>
                <span class="custom-tabs-label">
                  <el-icon><calendar /></el-icon>
                  <span class="cz-px-1">基础信息</span>
                </span>
              </template>
              <tabs-base
                :info="_userInfo as any"
                @on-update="handleRefresh"
              />
            </el-tab-pane>
            <el-tab-pane
              v-if="!isMobile"
              label="密码修改"
            >
              <template #label>
                <span class="custom-tabs-label">
                  <el-icon><Lock /></el-icon>
                  <span class="cz-px-1">密码修改</span>
                </span>
              </template>
              <pwd-update />
            </el-tab-pane>
            <el-tab-pane label="文章动态">
              <template #label>
                <span class="custom-tabs-label">
                  <el-icon><Tickets /></el-icon>
                  <span class="cz-px-1">文章动态</span>
                </span>
              </template>
              <profile-dynamic />
            </el-tab-pane>
            <el-tab-pane label="随心说">
              <template #label>
                <span class="custom-tabs-label">
                  <el-icon><Edit /></el-icon>
                  <span class="cz-px-1">随心说说</span>
                </span>
              </template>
              <el-empty description="随心说说" />
            </el-tab-pane>
          </el-tabs>
        </div>
      </div>
    </div>
  </div>
  <div
    v-if="!isMobile"
    class="wallpaper"
  >
    <video
      ref="videoRef"
      muted
      autoplay
      loop
    >
      <source
        src="@/assets/video.mp4"
        type="video/mp4"
      >
    </video>
  </div>
</template>

<style scoped lang="scss">
.wallpaper {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1; /* 确保视频在其他内容之后显示 */
}
.right-line{
  border-right: 1px dashed lightblue;
}
.card-bg {
  background: rgba(255,255,255,.9);
}
html[class='dark']  .card-bg {
  background: var(--card-bg);
}
:deep(.el-textarea__inner) {
  background: transparent;
}
:deep(.el-input__wrapper) {
  background: transparent;
}
:deep(.el-input__count) {
  background: transparent;
}
</style>
